import { Button, Form, Input } from 'antd'
import '../assets/css/login.css'
import { useNavigate } from 'react-router-dom'
import { userLogin } from '../request/api'
function App () {
  const Navigate = useNavigate()
  const onFinish = values => {
    console.log('登录成功:', values)
    // 调用接口
    userLogin(values).then(res => {
      console.log(res)
      if (res.code == 200) {
        // 跳转到首页
        Navigate('/index')
        // 存入本地
        sessionStorage.setItem('userInfo', JSON.stringify(res.list))
      }
    })
  }

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo)
  }
  return (
    <div className='loginBox'>
      <Form
        className='aform'
        name='basic'
        labelCol={{
          span: 6
        }}
        wrapperCol={{
          span: 16
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete='off'
      >
        <Form.Item
          className='formx'
          label='用户名'
          name='username'
          rules={[
            {
              required: true,
              message: '请输入用户名!'
            }
          ]}
        >
          <Input className='inp' />
        </Form.Item>

        <Form.Item
          label='密码'
          name='password'
          rules={[
            {
              required: true,
              message: '请输入密码!'
            }
          ]}
        >
          <Input.Password className='inp' />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16
          }}
        >
          <Button type='primary' htmlType='submit'>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
export default App
